<template>
	<view>
	    <view class="uni-padding-wrap uni-common-mt">
	      <view class="uni-title uni-common-mt">默认样式</view>
	      <view>
	        <checkbox-group>
	          <checkbox value="cb1" checked="true" />选中
	          <checkbox value="cb" />未选中
	        </checkbox-group>
	      </view>
	      <view class="uni-title uni-common-mt">不同的颜色和尺寸的checkbox</view>
	      <view>
	        <checkbox-group>
	          <label style="background-color: #8A6DE9;">
	            <checkbox value="cb1" checked="true" style="transform: scale(0.7)" />选中
	          </label>
	          <label>
	            <checkbox value="cb" style="transform: scale(0.7)" />未选中
	          </label>
	        </checkbox-group>
	      </view>
	    </view>
	    <view class="uni-title uni-common-mt">推荐展开样式</view>
	    <view class="uni-list">
	      <checkbox-group @change="checkboxChange">
	        <label 
	          class="uni-list-cell uni-list-cell-pd" 
	          v-for="(item, index) in items" 
	          :key="index" 
	          style="background-color: #F3A73F; display: flex; align-items: center; margin-bottom: 5px;"
	        >
	          <checkbox :value="item.value" :checked="item.checked" />
	          <view>{{ item.name }}</view>
	        </label>
	      </checkbox-group>
	    </view>
	  </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      items: [
	        { name: '美国', value: 'usa', checked: false },
	        { name: '中国', value: 'china', checked: true },
	        { name: '巴西', value: 'brazil', checked: false },
	        { name: '日本', value: 'japan', checked: true },
	        { name: '英国', value: 'uk', checked: false },
	        { name: '法国', value: 'france', checked: false }
	      ]
	    };
	  },
	  methods: {
	    checkboxChange: function (e) {
	      var items = this.items;
	      var values = e.detail.value;
	      for (var i = 0, lenI = items.length; i < lenI; ++i) {
	        const item = items[i];
	        console.log(
	          'i:' +
	            i +
	            '---' +
	            item.name +
	            ', index:' +
	            values.indexOf(item.value) +
	            ', isCheck: ' +
	            item.checked
	        );
	        if (values.indexOf(item.value) >= 0) {
	          this.$set(item, 'checked', true);
	        } else {
	          this.$set(item, 'checked', false);
	        }
	      }
	    }
	  }
	};
	</script>
	
	<style>
	</style>
	A
	pages/components/form/form.vue
	+92-0
